import React from 'react';
import { Space } from 'antd';
import moment from 'moment';

// import {WeatherIcon} from '#/components';
import { FullscreenOutlined, FullscreenExitOutlined } from '#/utils/antdIcons';
import { OnHistory } from '#/utils/interactive';
import { toggleFull, isFullscreen } from '@/tool/utils/useFullscreen';
import styles from './index.less';

export default ({ tab, tabs, onChangeTab = () => {} }) => {
  const btnFullRef = React.useRef();
  const [dateWeek, setDateWeek] = React.useState('');
  const [time, setTime] = React.useState('');
  // const [weatherInfo, setWeatherInfo] = React.useState(null);

  const getTime = () => {
    setDateWeek(moment().format('YYYY-MM-DD dddd'));
    setTime(moment().local().format('HH:mm:ss'));
  };

  React.useEffect(() => {
    // fetchWeather();
    moment.locale('zh-cn', {
      weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    });
    getTime();
    const timer = setInterval(() => getTime(), 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  React.useEffect(() => {
    btnFullRef?.current?.click();
  }, [btnFullRef]);

  // const fetchWeather = async () => {
  //   // 兰州市附近
  //   const res = await getXinzhiWeather('103.40:36.03');
  //   setWeatherInfo(res?.results?.[0]?.now);
  // };

  return (
    <div className={styles.head}>
      <div className={styles.clock}>
        <Space size={0} split={<div className={styles.splitLine} />}>
          <div>{time}</div>
          <div>{dateWeek}</div>
          {/* <div>
            天气：{weatherInfo?.text}
            <WeatherIcon style={{ fontSize: '20px' }} id={weatherInfo?.code} />
          </div> */}
        </Space>
      </div>
      <div className={styles.head__title}>大唐甘肃发电有限公司集中报价中心</div>
      <div className={styles.tabs}>
        {tabs.map((lv) => (
          <div
            key={lv}
            className={`${styles.tab} ${lv === tab ? styles.active : ''}`}
            onClick={() => {
              if (lv === '交易层级') {
                OnHistory({
                  path: '/WeatherForecast',
                  params: {},
                  openType: 1,
                });
              } else {
                onChangeTab?.(lv);
              }
            }}
          >
            {lv}
          </div>
        ))}
        <div ref={btnFullRef} className={styles.btn_full} onClick={() => toggleFull()}>
          <div>{isFullscreen() ? <FullscreenExitOutlined /> : <FullscreenOutlined />}</div>
        </div>
      </div>
    </div>
  );
};
